<template>
  <el-row
    class="widget-col widget-view"
    :key="node.key"
    :gutter="node.options.gutter ? node.options.gutter : 0"
    :justify="node.options.justify"
    :align="node.options.align"
    @click.stop="handleSelectWidget()"
  >
    <el-col
      v-for="(col, colIndex) in node.columns"
      :key="colIndex"
      :span="col.span ? col.span : 0"
    >
      <draggable
        :list="col.list"
        group="people"
        tag="div"
        class="widget-view"
        :key="col.key"
        :item-key="col.key"
      >
        <template #item="{ element, index }">
          <div class="widget-view">
            <widget-form-item
              :element="element"
              :data="element"
              :key="element.id"
              v-model:select="selectWidget"
              :index="index"
            ></widget-form-item>

            <div class="widget-view-action" v-if="select.key == element.key">
              <i
                class="iconfont icon-icon_clone"
                @click.stop="handleWidgetClone(index)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="handleWidgetDelete(col.list,index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-if="select.key == element.key">
              <i class="iconfont icon-drag drag-widget"></i>
            </div>
          </div>
        </template>
      </draggable>
    </el-col>
    <div
      class="widget-view-action widget-col-action"
      v-if="selectWidget.key == node.key"
    >
      <i class="iconfont icon-trash"></i>
    </div>

    <div
      class="widget-view-drag widget-col-drag"
      v-if="selectWidget.key == node.key"
    >
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </el-row>
</template>
<script>
import draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";
export default {
  props: {
    node: {
      required: true,
      type: Object,
    },
    select: {
      type: Object,
    },
  },
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        console.log("select formrow watch ..." + val);
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  components: {
    draggable,
    WidgetFormItem,
  },
  name: "form-row-draggable",

  methods: {
    handleSelectWidget: function () {
      this.selectWidget = this.node;

      console.log("selected :" + this.selectWidget);
    },


    
    handleWidgetDelete:function(list,index){
      console.log("删除"+list+"中的"+index)
      list.splice(index,1)



    }

    // handleWidgetColAdd: function ($event, row, colIndex) {
    //   console.log("coladd", $event);
    //   console.log("this row:", row);
    //   console.log("this index", colIndex);
    //   // const newIndex = $event.newIndex
    //   // const oldIndex = $event.oldIndex
    //   const item = $event.item;

    //   console.log("from", item);

    //   let key = Date.parse(new Date()) + "$" + Math.ceil(Math.random() * 99999);

    //   //vue3 已经大量的改善了这个给值
    //   const curIndex = $event.newIndex;
    //   let itemCur = row.list[curIndex];
    //   if (itemCur.key == "") {
    //     itemCur.key = key;
    //     itemCur.id = key;
    //   } else {
    //     console.log("已经有id了");
    //   }

    //   console.log("rows", row.list);

    //   // this.$set(row.columns[colIndex].list, newIndex, {
    //   //   ...row.columns[colIndex].list[newIndex],
    //   //   options: {
    //   //     ...row.columns[colIndex].list[newIndex].options,
    //   //     remoteFunc: 'func_' + key
    //   //   },
    //   //   key,
    //   //   // 绑定键值
    //   //   model: row.columns[colIndex].list[newIndex].type + '_' + key,
    //   //   rules: []
    //   // })
    // },
  },
};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>